<template>
  <el-form ref="editForm" :model="editForm" label-width="120px">
    <el-form-item
      label="旧密码："
      prop="oldPwd"
      :rules="[{ required: true, message: '请填写旧密码', trigger: 'change' }]"
    >
      <el-input
        placeholder="请输入"
        v-model.trim="editForm.oldPwd"
        type="password"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="新密码："
      prop="newPwd"
      :rules="[
        { required: true, message: '请填写新密码', trigger: 'change' },
        { validator: validatePass, trigger: 'change' },
      ]"
    >
      <el-input
        placeholder="请输入"
        v-model.trim="editForm.newPwd"
        type="password"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="确认新密码："
      prop="renewPwd"
      :rules="[
        { required: true, message: '请重新输入新密码', trigger: 'change' },
        { validator: validatePass2, trigger: 'change' },
      ]"
    >
      <el-input
        placeholder="请输入"
        v-model.trim="editForm.renewPwd"
        type="password"
      ></el-input>
    </el-form-item>
    <el-form-item class="text-right">
      <el-button :loading="saving" type="primary" @click="saveAction"
        >保存</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      editForm: {
        oldPwd: "",
        newPwd: "",
        renewPwd: "",
      },
      saving: false,
    };
  },
  props: {
    info: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    if (this.info) {
      this.$message({
        type: "error",
        message: "密码安全度低，请修改密码",
        center: true,
      });
    }
  },
  methods: {
    validatePass2(rule, value, callback) {
      if (value !== this.editForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    validatePass(rule, value, callback) {
      const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;
      if (!reg.test(value)) {
        callback(
          new Error(
            "请输入8-16位字符,可使用大写字母,小写字母,数字或符号的至少三种组合"
          )
        );
      } else {
        callback();
      }
    },
    saveAction() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          this.saving = true;
          this.$post(
            "/systemsetup/systemsetup/updatePassWord",
            this.editForm
          ).then(
            (data) => {
              this.saving = false;
              this.$message({
                type: "success",
                message: "修改成功,请重新登录",
                center: true,
              });
              this.$emit("success");
              this.editForm = {};
              if (!this.info) {
                this.$store.commit("setSiteInfos", null);
                this.$router.replace("/login");
              }
            },
            (error) => {
              this.saving = false;
              if (error.msg) {
                this.$message.error(error.msg);
              }
            }
          );
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-form-item {
  margin-bottom: 25px !important;
}
</style>
